<style>
.change_pwd .ivu-form-item-error-tip {
    top: 3px;
    left: 103%;
    width: 100%;
}
</style>

<template>
    <div class="change_pwd">
        <product-title></product-title>
        <Row>
            <Col span='8' offset='1'>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                <Form-item label="原密码" prop="pwd">
                    <Input type="password" v-model="formValidate.pwd" placeholder="请输原密码"></Input>
                </Form-item>
                <Form-item label="新密码" prop="pwdOne">
                    <Input type="password" v-model="formValidate.pwdOne" placeholder="请输新密码"></Input>
                </Form-item>
                <Form-item label="新密码" prop="pwdTwo">
                    <Input type="password" v-model="formValidate.pwdTwo" placeholder="请输再次新密码"></Input>
                </Form-item>
                <Form-item>
                    <Button type="primary" style="padding:6px 24px;" shape="circle" @click="handleSubmit('formValidate')">提交</Button>
                </Form-item>
            </Form>
            </Col>
        </Row>

    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import productTitle from '../../components/productTitle';
//import { changePwd } from '../../api/me';
import { changePassword } from '../../api/yun_user'
export default {
    data() {
        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'));
            } else {
                if (this.formValidate.pwdTwo !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.formValidate.validateField('pwdTwo');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formValidate.pwdOne) {
                callback(new Error('两次输入密码不匹配！'));
            } else {
                callback();
            }
        };
        return {
            formValidate: {
                pwd: '',
                pwdOne: '',
                pwdTwo: ''
            },
            ruleValidate: {
                pwd: [
                    { required: true, message: '请输原密码', trigger: 'blur' },
                    { type: 'string', min: 8, message: '密码长度不能小于8位', trigger: 'blur' }
                ],
                pwdOne: [
                    { validator: validatePass,required: true,  trigger: 'blur' },
                    { type: 'string', min: 8, message: '密码长度不能小于8位', trigger: 'blur' }
                ],
                pwdTwo: [
                    { validator: validatePassCheck,required: true, trigger: 'blur' },
                    { type: 'string', min: 8, message: '密码长度不能小于8位', trigger: 'blur' }
                ],

            }
        }
    },
    components: {
        productTitle,
    },
    created() {
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.change();
                } else {
                    this.$Message.error('表单验证失败!');
                }
            })
        },
        change() {
            let _params = this.formValidate;
            new Promise((resolve, reject) => {
                changePassword(_params).then(response => {
                    if (response.data.err == 0) {
                        this.$Message.success('提交成功!');
                        this.formValidate = {};
                        this.logout();
                        this.$Modal.info({
                            title:'请重新登陆！',
                            content:'您已成功修改密码，请重新登陆！',
                            closable:false,
                            onOk:()=>{
                                location.reload();
                            }
                            
                        })
                        
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        logout(){
            sessionStorage.removeItem('id');
            sessionStorage.removeItem('token');
        },
        handleReset(name) {
            this.$refs[name].resetFields();
        }
    }
};
</script>
